<template>
  <div v-show="isShow" class="panel-mask">
    <div class="select-panel">
      <div class="select-head">
        <span class="cancel" @click="cancel">取消</span>
        {{ title }}
        <span class="define" @click="define">确定</span>
      </div>
      <div
        ref="section"
        class="select-section"
        @mousewheel.prevent="mousewheel"
        @touchstart.prevent="touchstart"
        @touchend.prevent="touchend"
      >
        <div class="select-focus" />
        <div class="select-options">
          <div
            v-for="(opt, index) in options"
            :key="opt[field]"
            class="select-option"
            :class="currentIndex == index ? 'selected' : ''"
          >
            {{ opt[field] }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SelectPanel',
  data () {
    return {
      title: '',
      options: [],
      isShow: false,
      currentIndex: 0,
      touchY: 0,
      field: ''
    }
  },
  methods: {
    show (title, options, field, value, callback) {
      this.title = title
      this.options = options
      this.field = field
      this.callback = callback
      this.isShow = true
      this.reverseSelect(value)
    },
    hide () {
      this.isShow = false
      this.currentIndex = 0
      this.touchY = 0
      this.$refs.section.scrollTop = 0
      this.options = []
    },
    mousewheel (event) {
      if (event.deltaY < 0) {
        this.select(true)
      } else {
        this.select(false)
      }
    },
    touchstart (event) {
      this.touchY = event.touches[0].pageY
    },
    touchend (event) {
      if (this.touchY !== 0) {
        if (this.touchY - event.changedTouches[0].pageY > 10) {
          this.select(true)
        } else if (this.touchY - event.changedTouches[0].pageY < -10) {
          this.select(false)
        }
      }
      this.touchY = 0
    },
    select (isDown) {
      if (isDown && this.currentIndex < this.options.length - 1) {
        this.currentIndex++
      } else if (!isDown && this.currentIndex > 0) {
        this.currentIndex--
      }

      const eleHeight = document.getElementsByClassName('select-option')[0].clientHeight
      this.$refs.section.scrollTop = this.currentIndex * eleHeight
    },
    reverseSelect(value) {
      if (value) {
        const index = this.options.findIndex((op) => { return op[this.field] === value })
        this.currentIndex = index

        setTimeout(() => {
          const eleHeight = document.getElementsByClassName('select-option')[0].clientHeight
          this.$refs.section.scrollTop = this.currentIndex * eleHeight
        }, 10)
      }
    },
    cancel () {
      this.hide()
    },
    define () {
      if (this.options[this.currentIndex]) {
        this.callback(this.options[this.currentIndex][this.field], this.options[this.currentIndex])
      }
      this.hide()
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-mask {
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 52, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;

  .select-panel {
    position: absolute;
    width: 100%;
    height: 240px;
    bottom: 0;

    .select-head {
      height: 40px;
      line-height: 40px;
      border-radius: 10px 10px 0 0;
      background: #f1f4f9;
      text-align: center;
      font-size: 14px;
      color: #333333;
      font-weight: 600;
      padding: 0 15px;

      .cancel {
        float: left;
        font-weight: 400;
        color: #939ba4;
      }

      .define {
        color: #0b82ff;
        float: right;
        font-weight: 400;
      }
    }

    .select-section {
      width: 100%;
      height: 200px;
      overflow: auto;
      background: #fff;

      .select-options {
        padding: 85px 0;
        background: #fff;

        .select-option {
          height: 30px;
          line-height: 30px;
          text-align: center;
          font-size: 15px;
          color: #333333;
        }

        .select-option.selected {
          font-size: 16px;
        }
      }

      .select-focus {
      }

      .select-focus::before {
        content: " ";
        position: absolute;
        top: 40px;
        height: 85px;
        width: 100%;
        border-bottom: 1px solid #e2e4e8;
        background-image: -webkit-linear-gradient(
          top,
          transparent 0,
          rgba(255, 255, 255, 0.6) 0%,
          rgba(255, 255, 255, 0.4) 50%,
          rgba(255, 255, 255, 0.2) 100%,
          transparent
        );
      }

      .select-focus::after {
        content: " ";
        position: absolute;
        bottom: 0;
        height: 85px;
        width: 100%;
        border-top: 1px solid #e2e4e8;
        background-image: -webkit-linear-gradient(
          top,
          transparent 0,
          rgba(255, 255, 255, 0.2) 0%,
          rgba(255, 255, 255, 0.4) 50%,
          rgba(255, 255, 255, 0.6) 100%,
          transparent
        );
      }
    }
  }
}
</style>
